<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">
		<title>游客省市统计</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
		<%@ include file="/WEB-INF/jspf/statics.jspf" %>
	</head>
	<body>
		<%@include file="/WEB-INF/pages/common/header.jsp" %>
		<%@include file="/WEB-INF/pages/common/menu.jsp" %>
		<div id="rightqqqq" style="border-radius:5px;border:1px solidred;float:left;width:88%;height:10px;padding-left:4px;min-height:80%;overflow-y:auto; overflow-x:hidden; ">
            <div id="search" style="width:99%; height:50px; line-height:50px;margin:5px 0px;background-color:#ddeee5;">
				<form action="" id="searchForm1" style="float:left;padding-left:10px;">
					起始时间：
					<input type="text" name="startTime" id="startTime1"/>
					结束时间：
					<input type="text" name="endTime" id="endTime1"/>
					<input type="button" value="统计" onclick="searchProvice('column',true);" class="btn5" style="width:80px;"/>
				</form>&nbsp;&nbsp;&nbsp;&nbsp;
            	<input type="button" value="柱状图" onclick="changeChartProType('column',true);" class="btn5" style="width:80px;float:right;margin:10px 10px 0px 10px;"/>
            	<input type="button" value="折线图" onclick="changeChartProType('line',false);" class="btn5" style="width:80px;float:right;margin-top:10px;"/>
            </div>
			<div style="height:auto; " class="containerStyle">
				<div id="container1" style="min-width: 250px; height:300px; margin: 0 auto;"></div>
			</div>
			<div class="testaa" style="width:99%;height:10px;"></div>
			<div id="search" style="width:99%; height:50px; line-height:50px;margin-top:5px;background-color:#ddeee5;">
				<form action="" id="searchForm" style="float:left;padding-left:10px;">
					起始时间：
					<input type="text" name="startTime" id="startTime"/>
					结束时间：
					<input type="text" name="endTime" id="endTime"/>
					选择省份:
					<select id="proviceCode"  name="proviceCode" style="width:120px;">
						<c:forEach items="${provices}" var="provice">
							<option value="${provice.proviceCode}">
								${provice.proviceDisplay }
							</option>
						</c:forEach>
					</select>
					<input type="button" value="统计" onclick="searchCity('column');" class="btn5" style="width:80px;"/>
				</form>&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="button" value="柱状图" onclick="changeChartCityType('column');" class="btn5" style="width:80px;float:right;margin:10px 10px 0px 10px;"/>
				<input type="button" value="折线图" onclick="changeChartCityType('line');" class="btn5" style="width:80px;float:right;margin-top:10px;"/>
			</div>
			<div style="height:auto; " class="containerStyle">
				<div id="container2" style="min-width: 250px; height:300px; margin: 0 auto"></div>
			</div>
			<div class="testaa" style="width:99%;height:10px;"></div>
		</div>
	</body>
</html>
<script src="<%=basePath%>/js/highcharts/highcharts.js"></script>
<script src="<%=basePath%>/js/highcharts/modules/data.js"></script>
<script src="<%=basePath%>/js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-1.10.3.datepicker_zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">

$(function(){
	$('#navigation').accordion({
		header: '.head',
		navigation1: true, 
		event: 'click',
		fillSpace: true,
		active:1,
		animated: 'bounceslide'
	});
		$("a[class='actived']").removeAttr("class");
		$("#provicesAndCity").attr("class", "actived");
	searchProvice("column",true);
	$("input[name='startTime']").datepicker().val();
	$("input[name='endTime']").datepicker().val();
});	
function changeChartProType(type,changeColor){
	searchProvice(type,changeColor);
}
function changeChartCityType(type){
	searchCity(type);
}

function searchProvice(ChatTableType,changeColor){
	var xtext1 = [];
    var color1 = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'post',
        url:'${ctx }/visitor/statistics/chart/eve_provice_visitor',
        data:$("#searchForm1").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
           var json1 = eval("("+data+")");
           for(var i=0;i<json1.length;i++){
           		json1[i].y=json1[i].staCount;
                xtext1[i] = json1[i].staProviceDisplay;
 			}
            chart1.series[0].setData(json1);
        },
        error:function(e){
        } 
    });
    
    var chart1 = new Highcharts.Chart({
        chart:{
            renderTo:'container1',
           // type:'pie'
            type:ChatTableType
        },
        title:{
            text:'游客省份分布图' 
        },
        xAxis:{
            categories:xtext1
        },
        yAxis:{
            title:{
                text:'人数' //Y轴的名称
            },
        }, 
        series:[{
        	colorByPoint: changeColor,	
            name:"地区"
        }]
    });
}

function searchCity(ChatTableType){
	var xtext = [];
    $.ajax({
        type:'post',
        url:'${ctx }/visitor/statistics/chart/eve_city_visitor_inProvice',//请求数据的地址
        data:$("#searchForm").serializeArray(),
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        success:function(data){
            var json = eval("("+data+")");
	        for(var i=0;i<json.length;i++){
	        	json[i].y=json[i].staCount;
	            xtext[i] = json[i].staCityDisplay;
			}
            chart.series[0].setData(json);
        },
        error:function(e){
        } 
    });

    var chart = new Highcharts.Chart({
        chart:{
            renderTo:'container2',
            type:ChatTableType
        },
        title:{
            text:'游客市级分布图'
        },
        xAxis:{
            categories:xtext
        },
        yAxis:{
            title:{
                text:'人数' 
            },
        }, 
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y}' 
                }
            }
        },
        tooltip: {
            pointFormat: '<span>占比</span>: <b>{point.y:.2f}%</b><br/>'
        },
        series:[{
            name:"地区"
        }]
    });
}
</script>